<template>
<div id="tet-com">
    <div class="table">
        <ul class="thead">
            <li class="th">#</li>
            <li class="th">cat_name</li>
            <li class="th">33333</li>
            <li class="th">4444</li>
            <li class="th">5555</li>
        </ul>
        <div class="tbody">
            <recursion-com
                :list="cateList"
                :id="'cate_id'"
            ></recursion-com>
        </div>
    </div>
</div>
</template>

<script>
const cateList = [
    {
        "cat_id": 1622,
        "cat_name": "咖啡1",
        "cat_pid": 0,
        "cat_level": 0,
        "cat_deleted": false,
        "children": [
            {
                "cat_id": 1638,
                "cat_name": "蓝山咖啡",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1800,
                        "cat_name": "12",
                        "cat_pid": 1638,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1823,
                        "cat_name": "11",
                        "cat_pid": 1638,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1667,
                "cat_name": "雀巢咖啡",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1771,
                        "cat_name": "55555",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1792,
                        "cat_name": "1",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1829,
                        "cat_name": "xa",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1840,
                        "cat_name": "11",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1846,
                        "cat_name": "11",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1850,
                        "cat_name": "1234tftgybhjkl",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1853,
                        "cat_name": "awesrdftyghujik",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1870,
                        "cat_name": "13",
                        "cat_pid": 1667,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1811,
                "cat_name": "11",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1854,
                        "cat_name": "12345",
                        "cat_pid": 1811,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1813,
                "cat_name": "aa",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1819,
                "cat_name": "1122112",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1821,
                "cat_name": "111",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1822,
                "cat_name": "11",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1842,
                "cat_name": "11121",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1845,
                "cat_name": "11121",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1848,
                "cat_name": "1234567890",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1860,
                "cat_name": "123",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1863,
                "cat_name": "1",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1876,
                "cat_name": "1232",
                "cat_pid": 1622,
                "cat_level": 1,
                "cat_deleted": false
            }
        ]
    },
    {
        "cat_id": 1649,
        "cat_name": "数码产品",
        "cat_pid": 0,
        "cat_level": 0,
        "cat_deleted": false,
        "children": [
            {
                "cat_id": 1656,
                "cat_name": "智能手机",
                "cat_pid": 1649,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1658,
                        "cat_name": "oppo",
                        "cat_pid": 1656,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1659,
                        "cat_name": "vivo",
                        "cat_pid": 1656,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1660,
                        "cat_name": "华为",
                        "cat_pid": 1656,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1661,
                        "cat_name": "小米",
                        "cat_pid": 1656,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1774,
                        "cat_name": "手机",
                        "cat_pid": 1656,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1797,
                        "cat_name": "12121",
                        "cat_pid": 1656,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1668,
                "cat_name": "智能手环",
                "cat_pid": 1649,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1757,
                        "cat_name": "刘",
                        "cat_pid": 1668,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1794,
                        "cat_name": "1",
                        "cat_pid": 1668,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1806,
                        "cat_name": "q",
                        "cat_pid": 1668,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1812,
                        "cat_name": "11",
                        "cat_pid": 1668,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1820,
                        "cat_name": "111",
                        "cat_pid": 1668,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1824,
                        "cat_name": "11",
                        "cat_pid": 1668,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1669,
                "cat_name": "智能手表",
                "cat_pid": 1649,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1670,
                        "cat_name": "华为",
                        "cat_pid": 1669,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1807,
                        "cat_name": "111",
                        "cat_pid": 1669,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1814,
                        "cat_name": "11",
                        "cat_pid": 1669,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1815,
                        "cat_name": "111",
                        "cat_pid": 1669,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1816,
                        "cat_name": "11",
                        "cat_pid": 1669,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1817,
                        "cat_name": "11",
                        "cat_pid": 1669,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1843,
                        "cat_name": "1222",
                        "cat_pid": 1669,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1791,
                "cat_name": "asd",
                "cat_pid": 1649,
                "cat_level": 2,
                "cat_deleted": false
            },
            {
                "cat_id": 1834,
                "cat_name": "1",
                "cat_pid": 1649,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1852,
                "cat_name": "wertyhuiop",
                "cat_pid": 1649,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1872,
                "cat_name": "11",
                "cat_pid": 1649,
                "cat_level": 1,
                "cat_deleted": false
            }
        ]
    },
    {
        "cat_id": 1708,
        "cat_name": "大家电",
        "cat_pid": 0,
        "cat_level": 0,
        "cat_deleted": false,
        "children": [
            {
                "cat_id": 1709,
                "cat_name": "电视",
                "cat_pid": 1708,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1758,
                        "cat_name": "111",
                        "cat_pid": 1709,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1760,
                        "cat_name": "刘",
                        "cat_pid": 1709,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1779,
                        "cat_name": "曲面电视",
                        "cat_pid": 1709,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1801,
                        "cat_name": "11",
                        "cat_pid": 1709,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1874,
                        "cat_name": "服装",
                        "cat_pid": 1709,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1802,
                "cat_name": "11111",
                "cat_pid": 1708,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1803,
                        "cat_name": "1",
                        "cat_pid": 1802,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1818,
                        "cat_name": "121",
                        "cat_pid": 1802,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1856,
                        "cat_name": "1",
                        "cat_pid": 1802,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1864,
                        "cat_name": "1",
                        "cat_pid": 1802,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1867,
                        "cat_name": "1",
                        "cat_pid": 1802,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            }
        ]
    },
    {
        "cat_id": 1743,
        "cat_name": "图书音像",
        "cat_pid": 0,
        "cat_level": 0,
        "cat_deleted": false,
        "children": [
            {
                "cat_id": 1744,
                "cat_name": "文学类",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1750,
                        "cat_name": "小说",
                        "cat_pid": 1744,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1751,
                        "cat_name": "传记",
                        "cat_pid": 1744,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1752,
                        "cat_name": "科幻",
                        "cat_pid": 1744,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1745,
                "cat_name": "社科类",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1859,
                        "cat_name": "123",
                        "cat_pid": 1745,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1746,
                "cat_name": "经管类",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1747,
                "cat_name": "科技类",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1755,
                        "cat_name": "六",
                        "cat_pid": 1747,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1748,
                "cat_name": "艺术类",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false,
                "children": [
                    {
                        "cat_id": 1756,
                        "cat_name": "刘",
                        "cat_pid": 1748,
                        "cat_level": 2,
                        "cat_deleted": false
                    },
                    {
                        "cat_id": 1832,
                        "cat_name": "as",
                        "cat_pid": 1748,
                        "cat_level": 2,
                        "cat_deleted": false
                    }
                ]
            },
            {
                "cat_id": 1857,
                "cat_name": "zs",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1858,
                "cat_name": "zs",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false
            },
            {
                "cat_id": 1861,
                "cat_name": "123243",
                "cat_pid": 1743,
                "cat_level": 1,
                "cat_deleted": false
            }
        ]
    },
    {
        "cat_id": 1766,
        "cat_name": "一级分类",
        "cat_pid": 0,
        "cat_level": 0,
        "cat_deleted": false
    }
]
const RecursionCom = () => import("./RecursionCom")
export default {
    name: 'testCom2',
    data() {
        return {
            cateList
        }
    },
    components: { RecursionCom }
}
</script>

<style coped>
#tet-com {
    overflow-y: scroll;
    height: 100%;
}
#tet-com::-webkit-scrollbar {
    display: none;
}
.table {
    border: 1px solid #ee9d9d;
}
.thead {
    display: flex;
    width: 100%;
}
.th {
    width: 100%;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-left: 1px solid #ee9d9d;
    box-sizing: border-box;
}
.th:nth-of-type(1) {
    min-width: 64px;
    max-width: 64px;
    width: 64px;
    border-left: none;
    text-align: left;
    padding-left: 16px;
}
.th:nth-of-type(2) {
    min-width: 160px;
}
.th:nth-of-type(3) {
    min-width: 80px;
}
.th:nth-of-type(4) {
    min-width: 80px;
}
.th:nth-of-type(5) {
    min-width: 160px;
}
</style>